/**
 *
 * @authors Your Name (you@example.org)
 * @date    2018-04-23 19:03
 * @version $Id$
 */
import React, { Component } from 'react';
import { Form, Icon, Input, Button, Checkbox, message, Layout } from 'antd';
import '../node_modules/antd/dist/antd.css';
import './Login.css';
import './Route/SRoute.js';

import {URL}  from './constant/Constant';

const { Header, Content, Footer, Sider } = Layout;
const FormItem = Form.Item;
// const url = 'http://192.168.1.137:8088';
const url = URL.urlRoot;
console.log(URL.urlRoot)



class NormalLoginForm extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            email:'',
            password:'',
            remember:false,
            errorMessage:'',
            waitSec:0,
        }
    }



    handleSubmit = (e) => {
        const date = new Date()
        const email = this.state.email;
        const pas = this.state.password;
        e.preventDefault();
        const formData = new FormData();
        formData.append('email', email);
        formData.append('password', pas);
        fetch(url+'/user/ulogin',{
            method: 'POST',
            body: formData,
        })
            .then(res => {
                return res.json();
            })
            .then(res => {
                if(res.code === 0){
                    window.localStorage.username = res.object.username;
                    window.localStorage.password = res.object.password;
                    window.localStorage.id = res.object.id;
                    window.localStorage.date = date.getTime();
                    window.localStorage.role = res.object.role;
                    window.localStorage.authorization = 'nianshao ' + res.token;
                    window.location.href = '/';
                }
                if(res.code === 100){
                    message.info('登录失败，用户名或者密码错误！');
                }
            })
            .catch(err => {
            })
    };



    handleChangeEmail = (e) => {
        this.setState({email:e.target.value});
    };
    handleChangePassword = (e) => {
        this.setState({password:e.target.value});
    };
    handleChangeRemember = (e) => {
        this.setState({remember:e.target.checked});
    };
    render() {
        const {errorMessage,email,password,remember} = this.state;
        const { getFieldDecorator } = this.props.form;
        return (
            <div className="login">
                <a className="head_icon col-md-8 col-sm-8" href="/">
                    <img src={require("./img/logo-whut.png")} alt=""/>
                </a>
                <Form onSubmit={this.handleSubmit} className="login-form">
                    <FormItem>
                        <h2 id='pleaseLogin'>欢迎登录</h2>
                        {getFieldDecorator('email', {
                            rules: [{ required: true, message: '请输入注册邮箱名!' }],
                        })(
                            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="请输入用户名，即注册邮箱" value={email} onChange={this.handleChangeEmail} />
                        )}
                    </FormItem>
                    <FormItem>
                        {getFieldDecorator('password', {
                            rules: [{ required: true, message: '请输入密码!' }],
                        })(
                            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="请输入密码" value={password} onChange={this.handleChangePassword}/>
                        )}
                    </FormItem>
                    <FormItem >
                        {getFieldDecorator('remember', {
                            valuePropName: 'checked',
                            initialValue: true,
                        })(
                            <Checkbox className="remember">记住账号</Checkbox>
                        )}
                        <Button type="primary" htmlType="submit"  className="login-form-button" >
                            登录
                        </Button>
                        或者<a href="/reg">注册账号！</a>
                    </FormItem>
                </Form>
                <Footer style={{ textAlign: 'center' }} className="footer">
                    SmartLab Design ©2018 Powered By 武汉理工大学智能技术实验室
                </Footer>
            </div>
        );
    }
}

const WrappedNormalLoginForm = Form.create()(NormalLoginForm);

export default WrappedNormalLoginForm;
